<template>
  <div class="left Bold">
    <div class="left_top flexC flex1  AlignItemsC JustifyContentC ">
      <h2 style="color: rgb(255,255,255,0.8);">医生统计</h2>
      <div class="flex">
        <div class="title flexC">
          <p class="colorF font_s18">今日服务人数</p>
          <p class="font_s24 font_wb" style="color: #00CDF2;">{{ creditForm.gyxy1 }}</p>
        </div>
        <div class="title flexC">
          <p class="colorF font_s18 ">今日呼叫人数</p>
          <p class="font_s24 font_wb" style="color: #00CDF2;">{{ creditForm.gyxy2 }}</p>
        </div>
      </div>
    </div>
    <div class="left_bottom Bold flex JustifyContentC AlignItemsC  flex1">
      <div class="flexC">
        <div class="title_list flexC">
          <span class="prvince">永嘉县</span>
          <span class="number_two font_s24 font_wb textR">{{ Qyys.yongjia }}</span>
        </div>
        <div class="title_list flexC">
          <span class="prvince">鹿城区</span>
          <span class="number_two font_s24 font_wb textR">{{ Qyys.lucheng }}</span>
        </div>
        <div class="title_list flexC">
          <span class="prvince">瓯海区</span>
          <span class="number_two font_s24 font_wb textR">{{ Qyys.ouhai }}</span>
        </div>
        <div class="title_list flexC">
          <span class="prvince">平阳县</span>
          <span class="number_two font_s24 font_wb textR">{{ Qyys.pingyang }}</span>
        </div>
        <div class="title_list flexC">
          <span class="prvince">泰顺县</span>
          <span class="number_two font_s24 font_wb textR">{{ Qyys.taishun }}</span>
        </div>
        <div class="title_list flexC">
          <span class="prvince">洞头区</span>
          <span class="number_two font_s24 font_wb textR">{{ Qyys.dongtou }}</span>
        </div>
      </div>
      <div style="padding: 0.5rem;"></div>
      <div class="flexC">
        <div class="title_list flexC">
          <span class="prvince">乐清市</span>
          <span class="number_two font_s24 font_wb textR">{{ Qyys.yueqing }}</span>
        </div>
        <div class="title_list flexC">
          <span class="prvince">龙湾区</span>
          <span class="number_two font_s24 font_wb textR">{{ Qyys.longwan }}</span>
        </div>
        <div class="title_list flexC">
          <span class="prvince">瑞安市</span>
          <span class="number_two font_s24 font_wb textR">{{ Qyys.ruian }}</span>
        </div>
        <div class="title_list flexC">
          <span class="prvince">文成县</span>
          <span class="number_two font_s24 font_wb textR">{{ Qyys.wencheng }}</span>
        </div>
        <div class="title_list flexC">
          <span class="prvince">苍南县</span>
          <span class="number_two font_s24 font_wb textR">{{ Qyys.cangnan }}</span>
        </div>
        <div class="title_list flex JustifyContentC AlignItemsC"><span style="color: #fad81f;">-</span></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'left',

  data () {
    return {
      mapData: {
        jiayong: 0
      },
      creditForm: {
        gyxy1: 0,
        gyxy2: 0
      },
      // 今日服务人数
      TotalDoctor: 0,
      // 今日呼叫人数
      TodayCall: 0,
      Qyys: {
        yongjia: '',
        lucheng: '',
        ouhai: '',
        pingyang: '',
        taishun: '',
        dongtou: '',
        yueqing: '',
        longwan: '',
        ruian: '',
        wencheng: '',
        cangnan: ''
      }
    }
  },
  mounted () {
    setInterval(() => {
      this.creditForm.gyxy1 = 0
      this.creditForm.gyxy2 = 0

      var creditInterval1 = null
      var creditInterval2 = null

      creditInterval1 = setInterval(() => {
        if (this.creditForm.gyxy1 >= this.TotalDoctor) {
          this.creditForm.gyxy1 = this.TotalDoctor
          clearInterval(creditInterval1)
        } else {
          this.creditForm.gyxy1 = parseInt(this.creditForm.gyxy1 + Math.ceil(this.TotalDoctor / 10))
        }
      }, 100)

      creditInterval2 = setInterval(() => {
        if (this.creditForm.gyxy2 >= this.TodayCall) {
          this.creditForm.gyxy2 = this.TodayCall
          clearInterval(creditInterval2)
        } else {
          this.creditForm.gyxy2 = parseInt(this.creditForm.gyxy2 + Math.ceil(this.TodayCall / 10))
        }
      }, 100)
    }, 5000)
    this.handle()
  },
  methods: {
    handle () {
      this.$http.post(this.$api.Qyys.qyys, true).then(result => {
        this.TotalDoctor = result.data.response.TotalDoctor
        // console.log(' 6. 医生总数', result.data.response.TotalDoctor)
      })

      /* this.$http.post(this.$api.Jrwcfw.jrwcfw, true).then(result => {
        this.Todayservice = result.data.response.Todayservice;
        // console.log('  8.今日完成服务人数', result.data.response)
      }); */
      this.$http.post(this.$api.TodayCall.todayCall, true).then(result => {
        this.TodayCall = result.data.response.TodayCall
        // console.log('   17.今日呼叫数量', result.data.response)
      })
      this.$http.post(this.$api.Qyys.qyys, 'qxcode=330324000000', true).then(result => {
        this.Qyys.yongjia = result.data.response.TotalDoctor
        // console.log(' 永嘉县医生总数', result.data.response);
      })

      this.$http.post(this.$api.Qyys.qyys, 'qxcode=330302000000', true).then(result => {
        this.Qyys.lucheng = result.data.response.TotalDoctor
        // console.log(' 鹿城区医生总数', result.data.response);
      })
      this.$http.post(this.$api.Qyys.qyys, 'qxcode=330304000000', true).then(result => {
        this.Qyys.ouhai = result.data.response.TotalDoctor
        // console.log(' 瓯海区医生总数', result.data.response);
      })
      this.$http.post(this.$api.Qyys.qyys, 'qxcode=330326000000', true).then(result => {
        this.Qyys.pingyang = result.data.response.TotalDoctor
        // console.log(' 平阳县医生总数', result.data.response);
      })
      this.$http.post(this.$api.Qyys.qyys, 'qxcode=330329000000', true).then(result => {
        this.Qyys.taishun = result.data.response.TotalDoctor
        // console.log('泰顺县医生总数', result.data.response);
      })

      this.$http.post(this.$api.Qyys.qyys, 'qxcode=330305000000', true).then(result => {
        this.Qyys.dongtou = result.data.response.TotalDoctor
        // console.log(' 洞头区医生总数', result.data.response);
      })
      this.$http.post(this.$api.Qyys.qyys, 'qxcode=330382000000', true).then(result => {
        this.Qyys.yueqing = result.data.response.TotalDoctor
        // console.log('乐清市医生总数', result.data.response);
      })
      this.$http.post(this.$api.Qyys.qyys, 'qxcode=330303000000', true).then(result => {
        this.Qyys.longwan = result.data.response.TotalDoctor
        // console.log(' 龙湾区医生总数', result.data.response);
      })
      this.$http.post(this.$api.Qyys.qyys, 'qxcode=330381000000', true).then(result => {
        this.Qyys.ruian = result.data.response.TotalDoctor
        // console.log(' 瑞安市医生总数', result.data.response);
      })
      this.$http.post(this.$api.Qyys.qyys, 'qxcode=330328000000', true).then(result => {
        this.Qyys.wencheng = result.data.response.TotalDoctor
        // console.log('文成县医生总数', result.data.response);
      })
      this.$http.post(this.$api.Qyys.qyys, 'qxcode=330327000000', true).then(result => {
        this.Qyys.cangnan = result.data.response.TotalDoctor
        // console.log(' 苍南县医生总数', result.data.response);
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.left {
  .left_top {
    position: absolute;
    top: 8%;
    left: 2rem;
    height: 20%;
    width: 25%;
    background: url(../../assets/img/home/datasea/left1.png) no-repeat;
    background-size: 100% 100%;
    .title {
      padding: 1.2rem;
      margin: 1.5rem;
      background: url(../../assets/img/home/datasea/2.png) no-repeat;
      background-size: 100% 100%;
    }
  }
  .left_bottom {
    position: absolute;
    top: 30%;
    left: 2rem;
    height: 65%;
    width: 25%;
    background: url(../../assets/img/home/datasea/left2.png) no-repeat;
    background-size: 100% 100%;
    .title_list {
      background: url(../../assets/img/home/datasea/1.png) no-repeat;
      background-size: 100% 100%;
      width: 9rem;
      height: 3.9rem;
      margin-top: 1rem;
      padding: 0.3rem 1rem;
    }
    .prvince {
      color: #fad81f;
    }
    .number_two {
      color: #2de3f8;
      padding-right: 2rem;
    }
  }
}
</style>
